<template>
<view class="page-container">
<image class="background-image" src="../../static/image/111.png" mode="aspectFill"></image>
<scroll-view class="content-scroll" scroll-y
  refresher-enabled
  :refresher-triggered="refresherTriggered"
  @refresherrefresh="onRefresh"
>
<!-- 轮播图区域 -->
<swiper class="swiper" circular autoplay interval="3000" duration="1000" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#ffffff">
  <swiper-item v-for="(item, index) in swiperList" :key="index">
    <image :src="item.image" mode="aspectFill" class="swiper-image"/>
  </swiper-item>
</swiper>
<!-- 主标题区域 -->
<view class="main-title-section">
  <text class="main-title">藕丝织物</text>
</view>
<!-- 主题介绍区域 -->
<view class="intro-card">
  <view class="text-wrapper">
    <text class="intro-desc" user-select>藕丝织物是中国传统工艺的瑰宝，以莲藕的纤维为原料精心编织而成。这种独特的天然纤维具有轻盈、柔软、透气的特性，经过匠人们的巧手加工，可以制成各种精美的服饰和装饰品。藕丝织物不仅展现了精湛的传统工艺，更蕴含了东方美学的典雅意境，是一种难得的生态环保面料。每一件藕丝制品都凝聚着匠人们的智慧与耐心，堪称可持续时尚的典范。</text>
  </view>
  <image
    class="intro-image"
    mode="aspectFill"
    src="https://ai-public.mastergo.com/ai/img_res/f3f028eea16a163ec1a7ec03e529d8a5.jpg"
  />
</view>
<!-- 产品选择区域 -->
<view class="product-section">
  <view class="section-title">选择产品</view>
  <uni-data-select
    v-model="selectedProduct"
    :localdata="productOptions"
    @change="handleProductChange"
    placeholder="请选择产品"
    class="product-select"
  />
</view>
<!-- 产品详情区域 -->
<view class="product-detail" v-if="currentProduct">
  <image
    class="product-image"
    mode="aspectFill"
    :src="currentProduct.image"
  />
  <view class="detail-title">{{ currentProduct.name }}</view>
  <view class="detail-content">
    <text>{{ currentProduct.description }}</text>
  </view>
</view>
<!-- 制作流程按钮 -->
<view class="action-section">
<button
class="process-btn"
:class="{ 'process-btn-disabled': !selectedProduct }"
@click="navigateToProcess"
>
查看制作流程
</button>
</view>
</scroll-view>
</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const searchValue = ref('')
const selectedProduct = ref('')
const productOptions = ref([])
const currentProduct = ref(null)
const refresherTriggered = ref(false)

// 获取产品列表
const getProductList = async () => {
  try {
    const res = await uni.request({
      url: 'https://xiaocheng.top:8209/wx/product/selectProductNameAndId',
      method: 'GET'
    })
    
    if (res.data.code === 200) {
      productOptions.value = res.data.result.map(item => ({
        value: item.id,
        text: item.productname
      }))
    } else {
      uni.showToast({
        title: '获取产品列表失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('获取产品列表失败:', error)
    uni.showToast({
      title: '获取产品列表失败',
      icon: 'none',
      duration: 2000
    })
  }
}

// 获取产品详情
const getProductDetail = async (id) => {
  try {
    const res = await uni.request({
      url: 'https://xiaocheng.top:8209/wx/product/selectProductById?id=' + id,
      method: 'POST',
    })
    
    if (res.data.code === 200) {
      const productData = res.data.result
      currentProduct.value = {
        name: productData.productname,
        description: productData.detail,
        image: productData.photo
      }
    } else {
      uni.showToast({
        title: '获取产品详情失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('获取产品详情失败:', error)
    uni.showToast({
      title: '获取产品详情失败',
      icon: 'none',
      duration: 2000
    })
  }
}

// 页面加载时获取产品列表
onMounted(() => {
  getProductList()
})

const handleProductChange = async (value) => {
  selectedProduct.value = value
  if (value) {
    await getProductDetail(value)
  } else {
    currentProduct.value = null
  }
}

const navigateToProcess = () => {
  if (!selectedProduct.value) {
    uni.showToast({
      title: '请选择产品',
      icon: 'none',
      duration: 2000,
      position: 'top',
      mask: true
    })
    return
  }
  uni.navigateTo({
    url: `/pages/process/process?productId=${selectedProduct.value}`
  })
}

const onRefresh = async () => {
  refresherTriggered.value = true
  try {
    await getProductList()
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 1500
    })
  } catch (e) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    setTimeout(() => {
      refresherTriggered.value = false
    }, 800)
  }
}

// 轮播图数据
const swiperList = [
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/f3f028eea16a163ec1a7ec03e529d8a5.jpg',
  },
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/4479fd9fdb4ba14495098ebb139af8c9.jpg',
  },
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/a5eabc17143ee468b399865756d12abc.jpg',
  }
]
</script>

<style>
/* 全局样式 */
page {
  height: 100%;
  font-family: "Source Han Serif CN", "Noto Serif CJK SC", "思源宋体", "宋体", SimSun, serif;
  font-weight: 300;
}

/* 容器样式 */
.page-container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8; /* 调整背景图片透明度 */
}

.content-scroll {
  position: relative;
  flex: 1;
  overflow: auto;
  z-index: 1;
  background-color: rgba(248, 248, 248, 0.92); /* 调整内容区域透明度 */
  backdrop-filter: blur(15px); /* 增加模糊效果 */
  -webkit-backdrop-filter: blur(15px);
}

/* 轮播图样式 */
.swiper {
  width: 100%;
  height: 400rpx;
  position: relative;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 主标题区域 */
.main-title-section {
  margin: 30rpx 20rpx 5rpx;
  padding: 0;
}

.main-title {
  display: block;
  font-size: 32px;
  font-weight: 400;
  color: #333333;
  text-align: center;
  padding: 10rpx 0;
  letter-spacing: 4rpx;
}

/* 介绍卡片 */
.intro-card {
  margin: 20rpx;
  padding: 30rpx 10rpx;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.text-wrapper {
  width: 100%;
}

.intro-desc {
  display: block;
  font-size: 20px;
  color: #666666;
  line-height: 1.8;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-weight: 300;
}

.intro-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  margin-top: 30rpx;
}

/* 产品选择区域 */
.product-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.section-title {
  display: block;
  font-size: 26px;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
  text-align: center;
  padding: 12rpx 0;
  letter-spacing: 4rpx;
}

.product-select {
  width: 100%;
}

/* 修改uni-data-select的样式 */
:deep(.uni-data-select) {
  width: 100%;
}

:deep(.uni-data-select .uni-select) {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #ffffff;
  border: 2rpx solid #e5e5e5;
  border-radius: 44rpx;
  padding: 0 30rpx;
  font-size: 28px;
  color: #333333;
}

:deep(.uni-data-select .uni-select__input-text) {
  line-height: 88rpx;
}

:deep(.uni-data-select .uni-select__arrow) {
  color: #666666;
}

/* 产品详情区域 */
.product-detail {
  margin: 20rpx;
  padding: 30rpx 10rpx;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.product-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.detail-title {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
  text-align: center;
  padding: 12rpx 0;
  letter-spacing: 4rpx;
}

.detail-content {
  display: block;
  font-size: 20px;
  color: #666666;
  line-height: 1.8;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-weight: 300;
}

/* 按钮区域 */
.action-section {
  padding: 40rpx 30rpx;
}

.process-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(45deg, #4CAF50, #45a049);
  color: #ffffff;
  font-size: 28px;
  border-radius: 44rpx;
  letter-spacing: 4rpx;
  font-weight: 300;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
  transition: all 0.3s ease;
}

.process-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.1);
}

.process-btn-disabled {
  background: #cccccc;
  box-shadow: none;
  opacity: 0.7;
}

/* 移除搜索区域相关样式 */
.search-container {
  display: none;
}

/* 移除步骤数量相关样式 */
.detail-steps,
.steps-count {
  display: none;
}

/* 移除查看具体步骤按钮样式 */
.view-steps-btn {
  display: none;
}
</style>
